{% extends "base.html" %}

{% block subtitle %}
  Gallery
{% endblock subtitle %}

{% block content %}

  <div class="container" ng-controller="Gallery">
    <div class="oppia-main-content">
      <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
          <h3 class="oppia-page-title">
            Gallery
          </h3>
        </div>

        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-8">
          <form role="search">
            <div class="form-group">
              <div class="input-group">
                <div class="input-group-addon">
                   <span class="glyphicon"
                         ng-class="{'glyphicon-search': !searchIsLoading,
                                    'glyphicon-refresh': searchIsLoading,
                                    'oppia-animate-spin': searchIsLoading}">
                   </span>
                </div>
                <input type="text" class="form-control" placeholder="Search Explorations" ng-model="searchQuery" ng-keyup="onSearchQueryChange($event)">
              </div>
            </div>
          </form>
        </div>

        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
          <div class="hidden-xs">
            <!-- NOTE: If you change the links here, please make the corresponding change in the 'no results' message. -->
            {% if not user_email %}
              <!-- User must log in. -->
              <span class="pull-right">
                <a class="btn btn-success protractor-test-create-exploration" href="{{gallery_login_redirect_url}}">
                  Create New Exploration
                </a>
              </span>
            {% elif not username %}
              <!-- User must register. -->
              <span class="pull-right">
                <a class="btn btn-success protractor-test-create-exploration" href="{{gallery_register_redirect_url}}">
                  Create New Exploration
                </a>
              </span>
            {% else %}
              <span class="pull-right">
                <a class="btn btn-success protractor-test-create-exploration"
                   ng-click="showCreateExplorationModal(getCategoryList())">
                  Create New Exploration
                </a>
                {% if allow_yaml_file_upload %}
                  <a class="btn btn-default btn-lg"
                      ng-click="showUploadExplorationModal(getCategoryList())">
                    Upload Existing Exploration
                  </a>
                {% endif %}
              </span>
            {% endif %}
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-1 oppia-gallery-sidebar oppia-light-border-right" ng-class="{'oppia-gallery-sidebar-active': gallerySidebarIsActive}">
          <div class="visible-xs">
            <div ng-if="!gallerySidebarIsActive">
              <button ng-click="toggleGallerySidebar()" class="pull-right">
                <span class="glyphicon glyphicon-chevron-right">
                </span>
              </button>
            </div>

            <div ng-if="gallerySidebarIsActive">
              <button ng-click="toggleGallerySidebar()" class="pull-right">
                <span class="glyphicon glyphicon-chevron-left">
                </span>
              </button>
            </div>
          </div>

          <div class="oppia-gallery-menu" ng-if="gallerySidebarIsActive || screenIsLarge">
            <h4><strong>Categories</strong></h4>
            <checkbox-group all-categories-label="All categories" model="selectedCategories" class="protractor-test-gallery-category">
            </checkbox-group>

            <h4><strong>Languages</strong></h4>
            <checkbox-group all-categories-label="All languages" model="selectedLanguages" class="protractor-test-gallery-language">
            </checkbox-group>
          </div>
        </div>

        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-10 oppia-gallery-main" ng-class="{'oppia-gallery-sidebar-active': gallerySidebarIsActive}">
          <div class="tab-content oppia-gallery-tiles-container">
            <div ng-if="(allExplorationsInOrder | selectedCategoriesFilter:selectedCategories:'category' | selectedCategoriesFilter:selectedLanguages:'language').length === 0">
              <div>
                <em>We don't have any explorations on this topic yet.</em>
                <!-- NOTE: If you change the links here, please make the corresponding change for the 'Create New Exploration' button. -->
                {% if not user_email %}
                  <a href="{{gallery_login_redirect_url}}">Would you like to create one?</a>
                {% elif not username %}
                  <a href="{{gallery_register_redirect_url}}">Would you like to create one?</a>
                {% else %}
                  <a ng-click="showCreateExplorationModal(getCategoryList())">Would you like to create one?</a>
                {% endif %}
              </div>
            </div>

            <div ng-repeat="exploration in allExplorationsInOrder | selectedCategoriesFilter:selectedCategories:'category' | selectedCategoriesFilter:selectedLanguages:'language' track by $index" class="oppia-gallery-tile">
              <div style="position: relative;">
                <a class="btn btn-default btn-sm hidden-xs pull-right oppia-gallery-edit-btn" ng-if="exploration.is_editable" ng-href="/create/<[exploration.id]>" style="position: absolute; right: 5px;">
                  <span class="glyphicon glyphicon-pencil protractor-test-edit-exploration" title="Edit this exploration"></span>
                  Edit
                </a>
                {% if is_moderator %}
                  <a class="btn btn-default btn-sm hidden-xs pull-right oppia-gallery-edit-btn" ng-if="!exploration.is_editable && currentUserIsModerator" ng-href="/create/<[exploration.id]>" style="position: absolute; right: 5px;">
                    <span class="glyphicon glyphicon-pencil protractor-test-edit-exploration" title="Edit (as moderator)"></span>
                    Edit (as moderator)
                  </a>
                {% endif %}

                <a ng-href="/explore/<[exploration.id]>" style="margin-bottom: 2px; text-decoration: none;">
                  <div class="oppia-gallery-tile-top">
                    <div class="oppia-gallery-tile-description">
                      <span class="oppia-gallery-tile-title"><[exploration.title]></span>
                    </div>
                  </div>

                  <div class="oppia-gallery-tile-middle" style="color: black;">
                    <span ng-if="exploration.objective" class="protractor-test-exploration-objective"><[getFormattedObjective(exploration.objective)]></span>
                    <span ng-if="!exploration.objective"><em>No objective specified.</em></span>
                  </div>

                  <div class="oppia-gallery-tile-bottom">
                    <span class="pull-right">
                      <span class="label label-info">
                        <[exploration.category]>
                      </span>
                      <span ng-if="exploration.status === 'publicized'" class="label label-primary">
                        Featured
                        <span class="glyphicon glyphicon-star"></span>
                      </span>
                    </span>

                    <span class="oppia-gallery-tile-last-updated" ng-if="!gallerySidebarIsActive || screenIsLarge">
                      Last update: <[getLocaleAbbreviatedDatetimeString(exploration.last_updated)]>
                    </span>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script type="text/ng-template" id="checkboxGroup/master">
    <ul class="nav nav-pills nav-stacked">
      <li class="checkbox">
        <label>
          <input type="checkbox" ng-model="allCategoriesSelected" ng-change="onChangeSelection(true)">
          <strong><[allCategoriesLabel]></strong>
        </label>
      </li>
      <li ng-repeat="(category, status) in model" class="checkbox">
        <label>
          <input type="checkbox" ng-model="individualCategoryCheckboxStatuses[category]" ng-change="onChangeSelection(false)">
          <[category]>
        </label>
      </li>
    </ul>
  </script>

  {% include 'components/exploration_creation_button.html' %}
{% endblock %}

{% block footer_js %}
  {{ super() }}
  <script>
    {{ include_js_file('components/explorationCreationButton.js') }}
    {{ include_js_file('galleries/Gallery.js') }}
  </script>
  {{ noninteractive_widget_html }}
{% endblock footer_js %}
